<template>
    <div>
        <ul>
            <!-- 数组循环显示1 -->
            <li v-for="(item,index) in list" :key='index'>
              {{item.name}} - {{ item.price }} - {{ index }}
            </li>
            <!-- 数组循环显示2 -->
            <!-- <li v-for="(item2,index2) in list" :key='index' v-text="item2.name + '-' + item2.price + '-' + index2"></li> -->
            <!-- 循环对象 -->
            <li v-for="(value, key) in objList" :key='key'>
              {{key}} - {{value}}
            </li>
            <!-- 循环组件 -->
            <component-a v-for="(value, key) in objList" :key='key'></component-a>
            <hr/>
            <!-- 双向绑定 -->
            <li v-for="(item2,index2) in list" :key='index2'>
              {{item2.name}} - {{ item2.price }} - {{ index2 }}
            </li>
            <button v-on:click='addItem'>addItem</button>
        </ul>
    </div>
</template>
<script>
import componentA from './components/a'
import Vue from 'vue'
export default {
  components: {
    componentA: componentA
  },
  data () {
    return {
      list: [
        {
          name: 'apple',
          price: 34
        },
        {
          name: 'banana',
          price: 56
        }
      ],
      objList: {
        name: 'apple',
        price: 34,
        color: 'red',
        weight: 14
      }
    }
  },
  methods: {
    addItem () {
      // 给列表店家数据
      // this.list.push({name: 'hehe', price: 256})
      // 修改第二项数组
      Vue.set(this.list, 1, {
        name: 'hehe',
        price: 256
      })
    }
  }
}
</script>
